<template>
  <div>
    <Header v-if="shows == 'list'">
      <el-button size="small" @click="$emit('out')">
        返回
      </el-button>
      <div class="heads-right">
        <el-select v-model="flag" placeholder="请选择" size="small">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" size="small" @click="getList">
          搜索
        </el-button>
      </div>
    </Header>
    <Main v-if="shows == 'list'" :data="listData" :footer-lock="totals > 10">
      <el-table-column
        label="昵称"
        align="center"
        property="nick_name"
      ></el-table-column>
      <el-table-column
        label="真实姓名"
        align="center"
        property="truename"
      ></el-table-column>
      <el-table-column
        label="手机号"
        align="center"
        property="phone"
      ></el-table-column>
      <el-table-column
        label="抽奖时间"
        align="center"
        property="create_time"
      ></el-table-column>
      <el-table-column label="中奖状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.winning_status == 1 ? "中奖" : "未中奖" }}
        </template>
      </el-table-column>
      <el-table-column
        label="中奖奖项"
        align="center"
        property="prize"
      ></el-table-column>
      <el-table-column
        label="邮寄地址"
        align="center"
        property="address"
      ></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="250"
        class-name="tableoperation"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.grant_status == 0"
            size="mini"
            type="text"
            @click="hair(scope.row.log_id)"
          >
            发放
          </el-button>
          <el-button v-else size="mini" disabled type="text">
            已发放
          </el-button>
        </template>
      </el-table-column>
    </Main>

    <Footer :total="totals">
      <el-pagination
        class="list-pagination"
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>
  </div>
</template>
<script>
import { WIN_LIST, LOG_PRIZE } from "../service";

export default {
  props: {
    activityId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      shows: "list",
      options: [
        { label: "全部", value: 99 },
        { label: "中奖", value: 1 },
        { label: "未中奖", value: 0 },
        { label: "已发放", value: 3 },
        { label: "未发放", value: 2 }
      ],
      listData: [],
      totals: 0,
      pages: 1,
      flag: 99
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async hair(logId) {
      await this.$confirm("是否发放?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          LOG_PRIZE({ log_id: logId, grant_status: 1 }).then(
            ({ code, msg }) => {
              if (code === 200) {
                this.getList();
              }
              this.$message({
                message: msg,
                type: code === 200 ? "success" : "error"
              });
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消发放!"
          });
        });
    },
    async getList() {
      await WIN_LIST({
        page: this.pages,
        pageshow: 10,
        activity_id: this.activityId,
        flag: this.flag
      }).then(({ code, data, msg }) => {
        if (code === 200) {
          this.listData = data.list;
          this.totals = data.count;
        } else {
          this.$message.error(msg);
          this.listData = [];
          this.totals = 0;
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
